<template>
    <div class="login-wrapper">
        <!-- <div class="top"></div> -->
        <!-- <div class="bottom"></div> -->
        <div class="login-content">
            <div class="title">
                <div class="text">
                    {{ flag == '0' ? '用户登录' : '用户注册' }}
                </div>
                <div class="go-register" @click="hanldeFlag">
                    {{ flag == '0' ? '暂未账号' : '已有账号' }}，
                    <span> {{ flag == '0' ? '直接注册' : '直接登录' }}</span>
                </div>
            </div>
            <div class="content">
                <el-form>
                    <el-form-item prop="account">
                        <el-input v-model="account" placeholder="请输入账号" class="account">
                            <i slot="prefix" class="el-input__icon el-icon-user"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="password" type="password" placeholder="请输入密码" class="password">
                            <i slot="prefix" class="el-input__icon el-icon-goods"></i>
                        </el-input>
                    </el-form-item>
                    <div @click="handleLogin" v-if="flag == '0'" class="loginBtn">登录</div>
                    <div @click="handleRegister" v-if="flag == '1'" class="loginBtn">注册</div>
                    <!-- <el-button @click="handelC">C端</el-button> -->
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { register, login } from "@/api/reception"
import utils from "@/utils"
export default {
    data() {
        return {
            account: "",
            password: "",
            flag: '0'
        };
    },

    mounted() {
        // this.registeUser();
        // this.loginUser()
    },

    methods: {
        hanldeFlag() {
            if (this.flag == '0') {
                this.flag = '1'
            } else {
                this.flag = '0'
            }
            console.log(this.flag);
            this.account = ''
            this.password = ''

        },
        async handleRegister() {
            let data = {
                account: this.account,
                password: this.password
            }
            const res = await register(data)
            console.log(res, 'rrr');
            if (res.code == 200) {
                utils._msgBox('注册成功', 'success')
                this.flag = '0'
                this.account = ''
                this.password = ''
            } else {
                utils._msgBox(res.message, 'error')
            }
        },
        async handleLogin() {
            let data = {
                voucher: this.account,
                password: this.password
            }
            const res = await login(data)
            console.log(res, 'rrr');
            if (res.code == 200) {
                utils.setCache('Ctoken', res.data.token)
                utils.setCache('name', res.data.nikeName)
                utils.setCache('phone', res.data.phone)
                this.$router.push({ path: "/orderHome" })
                utils._msgBox('登录成功', 'success')
            } else {
                utils._msgBox(res.message, 'error')
            }
        }
    }
}
</script>
<style lang="less" scoped>
.login-wrapper {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    // background-size: contain;
    background-repeat: no-repeat;
    background-image: url('@/assets/img/R-C.jpg');
    display: flex;
    // align-items: center;
    position: relative;
    background-color: #f2f2f2;
    flex-direction: column;

    .top {
        width: 100%;
        height: 40%;
        background-color: #ff4932;
    }

    .bottom {
        width: 100%;
        height: 60%;
        background-color: #ffffff;
    }

    .login-content {
        width: 90%;
        height: 350px;
        position: absolute;
        // right: 250px;
        left: 50%;
        top: 200px;
        transform: translateX(-50%);
        background-color: #fff;
        border-radius: 15px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        // box-shadow: #ff4932 0px 5px 5px;

        .titleHead {
            display: flex;
            justify-content: center;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            margin-bottom: 30px;

            .text {
                font-size: 22px;
                font-weight: 700;
            }

            .go-register {
                font-size: 12px;

                span {
                    font-size: normal;
                    color: #ff4932;
                    cursor: pointer;
                }
            }
        }

        .content {
            flex: 1;


            ::v-deep {
                .el-input__inner {
                    border: none;
                    background-color: #fff;
                    padding-bottom: 2px;
                    border-bottom: 1px solid #f2f2f2;
                    color: #333;
                }
            }

            .account {}

            .loginBtn {
                margin-top: 50px;
                height: 50px;
                // background-color: #155bd4;
                background: linear-gradient(#ff4932, #fe7455);
                line-height: 50px;
                text-align: center;
                border-radius: 15px;
                color: #fff;
                cursor: pointer;
            }
        }
    }
}
</style>